<script lang="ts" setup>
import { treeList } from '@/apis/system/category'
const prop = defineProps({
  query: {
    type: Object,
    default: () => ({})
  }
})
onMounted(() => {
  fetchTreeData()
})
const emit = defineEmits(['select'])
const checkedKeys = ref<string[]>([])
const expandedKeys = ref<string[]>([])
// 获取树形数据
const treeData = ref([])
const fetchTreeData = async () => {
  const res = await treeList(prop.query)
  treeData.value = res.data
}

const onExpand = (keys: string[]) => {
  expandedKeys.value = keys
}
const onSelect = (selectedKeys: string[], info: any) => {
  emit('select', selectedKeys, info.selectedNodes)
}
</script>
<template>
  <div class="base-click-tree">
    <a-tree
      show-line
      :tree-data="treeData"
      v-model:checkedKeys="checkedKeys"
      :expanded-keys="expandedKeys"
      @expand="onExpand"
      @select="onSelect"
    >
    </a-tree>
  </div>
</template>
<style lang="less" scoped>
.base-click-tree {
}
</style>
